<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的购物车 - 娃娃Get抓娃娃</title>


    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/js/swiper-4.4.2/swiper.min.css" />
    <link rel="stylesheet" href="assets/css/sweetalert.min.css" />
    <link rel="stylesheet" href="assets/css/main.css" />

    <script src="assets/js/jquery.slim.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/swiper-4.4.2/swiper.min.js"></script>
    <script src="assets/js/sweetalert.min.js"></script>
    <script src="assets/js/common.js"></script>




</head>
<body class="main-color">

    <div class="container cart-list">

        <!--start item -->
        <div class="cart-item flex" data-id="1" data-number="1" data-price="30" data-market-price="45">
            <div class="cart-item-icon"><input class="input-ids" type="checkbox" name="ids[]"/></div>
            <div class="cart-item-body flex">
                <div class="cart-item-thumb">
                    <img src="" alt="">
                </div>
                <div class="cart-item-info">
                    <div class="bold">范冰冰同款粉红豹范冰冰同款粉红豹</div>
                    <div class="cart-item-footer">
                        <div class="cart-goods-price"> <span class="cur-price">￥30</span>  <del><span class="del-price"> ￥45.00 </span></del></div>
                        <div class="cart-goods-attr">数量:&nbsp;&nbsp;&nbsp;<span>1</span> 已选: <span>红色,32cm</span></div>
                    </div>
                </div>
            </div>
            <div class="cart-item-icon cart-close"></div>
        </div>
        <!--end item -->



        <!--start item -->
        <div class="cart-item flex" data-id="2" data-number="1" data-price="30" data-market-price="45">
            <div class="cart-item-icon"><input class="input-ids" type="checkbox" name="ids[]"/></div>
            <div class="cart-item-body flex">
                <div class="cart-item-thumb">
                    <img src="" alt="">
                </div>
                <div class="cart-item-info">
                    <div class="bold">范冰冰同款粉红豹范冰冰同款粉红豹</div>
                    <div class="cart-item-footer">
                        <div class="cart-goods-price"> <span class="cur-price">￥30</span>  <del><span class="del-price"> ￥45.00 </span></del></div>
                        <div class="cart-goods-attr">数量:&nbsp;&nbsp;&nbsp;<span>1</span> 已选: <span>红色,32cm</span></div>
                    </div>
                </div>
            </div>
            <div class="cart-item-icon cart-close"></div>
        </div>
        <!--end item -->


        <!--start item -->
        <div class="cart-item flex" data-id="3" data-number="1" data-price="30" data-market-price="45">
            <div class="cart-item-icon"><input class="input-ids" type="checkbox" name="ids[]"/></div>
            <div class="cart-item-body flex">
                <div class="cart-item-thumb">
                    <img src="" alt="">
                </div>
                <div class="cart-item-info">
                    <div class="bold">范冰冰同款粉红豹范冰冰同款粉红豹</div>
                    <div class="cart-item-footer">
                        <div class="cart-goods-price"> <span class="cur-price">￥30</span>  <del><span class="del-price"> ￥45.00 </span></del></div>
                        <div class="cart-goods-attr">数量:&nbsp;&nbsp;&nbsp;<span>1</span> 已选: <span>红色,32cm</span></div>
                    </div>
                </div>
            </div>
            <div class="cart-item-icon cart-close"></div>
        </div>
        <!--end item -->

    </div>

    <div class="fixed-footer-top-01"></div>
    <div class="cart-footer flex" id="cart-page-total-info">
        <div class="all-tip flex">
            <div class="cart-item-icon "><input class="all-ids" type="checkbox"/></div>
            <div class="">全选 (<span id="total-number">0</span>)</div>
        </div>
        <div class="cart-page-total-info flex">
            <div class="account-info">
                <div class="cur-price">商品合计 ￥<span class="total-price" id="total-price">00.00</span></div>
                <div class="mark-price"><del><span id="mark-price">00.00</span></del></div>
            </div>
            <div class="account-btn">结算</div>
        </div>
    </div>

</body>


<script>
    $(function(){
        //input checked 切换
        $('.input-ids').click(function(){
            if($(this).prop('checked')==true) {
                $(this).parent().addClass('active');
            } else {
                $(this).parent().removeClass('active');
            }
            update_price();
        })

        //全选操作
        $('.all-ids').click(function(){
            var checked = $(this).prop('checked');
            $('.input-ids').each(function(){
                $(this).prop('checked',checked);
            })
            update_price();
        })

        //删除商品
        $('.cart-close').click(function(){
            $(this).parent().remove();
            //do something here
        })


        //
        $('.account-btn').click(function(){
            //检测是否有选择商品ID
            var goods_info = update_price();
            if(goods_info[0]==false) {
                swal('','请选择商品','error');
                return false;
            }

            //don something here

            location.href='confirm.html'
        })


    })





    //更新价格同数量
    function update_price() {
        var checked_number = 0;
        var len = $('.input-ids').length;
        var total_number = 0,total_price = 0,total_market_price=0;
        var tmp_dom,id;
        var goods_info = {};
        $('.input-ids').each(function(){
            tmp_dom = $(this).parent().parent()
            //更新图片
            if($(this).prop('checked')==true) {
                $(this).parent().addClass('active');
                id = tmp_dom.data('id')
                checked_number = checked_number + 1;
                total_number= total_number + parseInt(tmp_dom.data('number'))
                total_price = total_price + parseInt(tmp_dom.data('price'))
                total_market_price = total_market_price + parseInt(tmp_dom.data('market-price'))
                goods_info[id] = {
                    id: id,
                    number: tmp_dom.data('number'),
                    price: tmp_dom.data('market-price')
                }
            } else {
                $(this).parent().removeClass('active');
            }
        })
        //全选
        if(len==checked_number) {
            $('.all-ids').prop('checked',true).parent().addClass('active');
        } else {
            $('.all-ids').prop('checked',false).parent().removeClass('active');
        }

        $('#total-number').text(total_number);
        $('#total-price').text(total_price);
        $('#mark-price').text(total_market_price);

        return [(checked_number==0 ? false : true),goods_info];
    }





</script>














</html>